<template xmlns="http://www.w3.org/1999/html">
    <div class="mainled fontWhite">
        <el-row class="marginw">
            <el-col class="height80" :span="24" style="border-right:0.5px solid black">
                <el-row >
                    <el-col :span="8" style="border-top:0.5px solid black" class="height80  borderBL">
                        <div style="position:absolute;bottom:0;display:block;">
                            <div style="display:block;float:left">值班领导： 主值：{{mainDuty}} 副值：</div>
                            <div v-for="(val, index) in secondDutys" :key="index" style="display:block;float:left">
                                {{ val }} &nbsp;
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" style="border-top:0.5px solid black" class="height80 flexCenter fontSize36 borderBL">
                        华美热电欢迎您
                    </el-col>
                    <el-col :span="8" style="border-top:0.5px solid black;" class="height80 borderBL">
                        <div style="position:absolute;bottom:0;right:0;display:block">{{time}}</div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="main height284" :span="24" style="border-right:0.5px solid black">
                <el-row>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="24" class="height66 flexCenter borderBL"> {{ title1 }}</el-col>
                            <el-col v-for="(val, key, index) in opc1" :key="index" :span="12">
                                <el-row>
                                    <el-col :span="12" class="height66 flexCenter borderBL">{{key}}</el-col>
                                    <el-col :span="12" class="height66 flexCenter borderBL">{{val}}</el-col>
                                </el-row>
                            </el-col>
                            <el-col v-if="Object.keys(opc1).length < 6" :span="12">
                                <el-row>
                                    <el-col :span="12" class="height66 flexCenter borderBL">-</el-col>
                                    <el-col :span="12" class="height66 flexCenter borderBL">-</el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="4">
                        <el-row>
                            <el-col :span="24" class="height66 flexCenter borderBL">天气信息</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">当前风向</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">{{ weather.windDir }}</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">天气</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">{{ weather.text }}</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">温度</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">{{ weather.temp }} ℃</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="4">
                        <el-row>
                            <el-col :span="24" class="height66 flexCenter borderBL">发电量</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">计划发电量</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">{{prePower}}亿kWh</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">实际发电量</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">{{realPower}}亿kWh</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">-</el-col>
                            <el-col :span="12" class="height66 flexCenter borderBL">-</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="24" class="height66 flexCenter borderBL">{{title2}}</el-col>
                            <el-col v-for="(val, key, index) in opc2" :key="index" :span="12">
                                <el-row>
                                    <el-col :span="12" class="height66 flexCenter borderBL">{{key}}</el-col>
                                    <el-col :span="12" class="height66 flexCenter borderBL">{{val}}</el-col>
                                </el-row>
                            </el-col>
                            <el-col v-if="Object.keys(opc2).length < 6" :span="12">
                                <el-row>
                                    <el-col :span="12" class="height66 flexCenter borderBL">-</el-col>
                                    <el-col :span="12" class="height66 flexCenter borderBL">-</el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { apiGet, apiPost, apiDelete, path } from '../api/api'
export default {
    name: "",
    data() {
    return {
        url: "",
        title1: "",
        title2: "",
        opc1:{
        },
        opc2:{
        },
        time: "",
        weather: {
            temp: "-",
            text: "-",
            windDir: "-"
        },
        mainDuty: "",
        secondDutys: [],
        prePower:"",
        realPower: ""
    }
    },
    created(){
       this.setTime();
    },
    beforeDestroy(){
      clearInterval(this.timer);
      this.timer = null;
    },
    mounted(){
        this.timeStr();
        this.getWeather();
        this.getOtherDatas();
    },
    methods:{
        strRe(s){
            if(s< 10){
                return "0" + s;
            } else{
                return s;
            }

        },
        timeStr(){
            var vWeek,vWeek_s, vDay;
            vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
            var date = new Date();
            var year = date.getFullYear();
            var month = this.strRe(date.getMonth() + 1);
            var day = this.strRe(date.getDate());
            var hours = this.strRe(date.getHours());
            var minutes = this.strRe(date.getMinutes());
            var seconds = this.strRe(date.getSeconds());
            vWeek_s = date.getDay();
            this.time = year + "/" + month + "/" + day + " " + vWeek[vWeek_s] +
            " " + hours + "：" + minutes + "：" + seconds;
            
        },
        
      async getOpcData1(){
        var keyList = ["SYNCB5.DCS1_SO2", "SYNCB5.DCS1_NOX", "SYNCB5.DCS1_FC", "SYNCB5.DCS1_0LBS41CF101F", "SYNCB5.DCS1_SELMW"];
        const data = await apiPost(
          path.getOpcData,
          JSON.stringify({
          "itemCodes":keyList
        }) , '', '')
          console.log(data)
        if (data.result == 'SUCCESS') {
          for (let key in data.data){
            let opcCnName = data.data[key].cnName
            console.log(opcCnName)
            this.$set(this.opc1,opcCnName,data.data[key].value)
          }
          if(data.data.length!==0){
            this.title1 = data.data[0].title
          }
        }
        else {
          this.$message.error(data.message)
        }
          console.log(this.opc1)
      },
      async getOpcData2(){
        var keyList =["SYNCB5.DCS2_SO2", "SYNCB5.DCS2_NOX", "SYNCB5.DCS2_FC", "SYNCB5.DCS2_0LBS41CF101F", "SYNCB5.DCS2_SELMW"];
        const data = await apiPost(
          path.getOpcData,
          JSON.stringify({
          "itemCodes":keyList
        }) , '', '')
          console.log(data)
        if (data.result == 'SUCCESS') {
          for (let key in data.data){
            let opcCnName = data.data[key].cnName
            console.log(opcCnName)
            this.$set(this.opc2,opcCnName,data.data[key].value)
          }
          if(data.data.length!==0){
            this.title2 = data.data[0].title
          }
        }
        else {
          this.$message.error(data.message)
        }
          console.log(this.opc2)
      },
      setTime(){
        this.timer = setInterval(()=>{
          this.getOpcData1();
          this.getOpcData2();
          this.timeStr();
        }, 1000)
      },
      async getWeather(){
        var key = "b3bb9ad57ac54e3597ba94403068c16d";
        var location = "101190801";
        const data = await apiGet(
          `https://devapi.qweather.com/v7/weather/now?key=${key}&location=${location}`,
          {} , '', '')
        if(data.code == "200"){
            this.weather.windDir = data.now.windDir;
            this.weather.text = data.now.text;
            this.weather.temp = data.now.temp;
        }
      },
      async getOtherDatas(){
        const result = await apiGet(path.getOtherDataByKey, {
            "name": "主值"
        }, '', '')
        if (result.result == 'SUCCESS') {
            this.mainDuty = result.data.value
        }
        const result2 = await apiGet(path.getOtherDataByKey, {
            "name": "副值"
        }, '', '')
        if (result2.result == 'SUCCESS') {
            this.secondDutys = result2.data.value.split("，")
        }
        const result3 = await apiGet(path.getOtherDataByKey, {
            "name": "预热发电量"
        }, '', '')
        if (result3.result == 'SUCCESS') {
            this.prePower = result3.data.value
        }
        const result4 = await apiGet(path.getOtherDataByKey, {
            "name": "实际发电量"
        }, '', '')
        if (result4.result == 'SUCCESS') {
            this.realPower = result4.data.value
        }
      }
    }
}
</script>

<style scoped>
.mainled{
    height:405px;
    width:2695px;
    background-image:url(../assets/images/bluebackground.jpg);
    display: block;
}
.marginw{
    padding: 20px 40px;
    text-align: center;
    font-size: 24px;
}
.height80{
    height: 80px;
}
.height66{
    height: 66px;
}
.height284{
    height: 264px;
}
.fontWhite{
    color:white;
}
.flexCenter{
    display: flex;
    /* flex-flow: column; */
    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
}
.fontSize36{
    
    font-size: 36px;
}
.fontLeft{
    
    display: flex;
    /* flex-flow: column; */
    /* align-items: center; */
    justify-content:end;
    flex-direction: column;
    text-align: left;
}
.fontRight{
    
    display: flex;
    /* flex-flow: column; */
    /* align-items: center; */
    justify-content:end;
    flex-direction: column;
    text-align: right;
}
.borderBL{
    border-bottom:0.5px solid black;
    border-left: 0.5px solid black;
}

</style>

  
